The View of an Output State is where you create the presentation and information for your user. This information can be in the form of text, graphics, sound, video, animation, or a combination of all - true multimedia. Using Course Builder's built-in tools and judging capabilities, you can even create working simulations which will respond according to user input.
>> Double-click on the View (bottom 2/3rds) of the Design Output State Welcome to show its Design Window.
Each Design Output State has its own Design Window where you develop what will be seen when the program is run. The palette to the left contains graphic creation tools while the toolbar along the bottom has options for animation, timing, sound, video and transition effects (this transition menu is the same as the one available in the Information Center of the State).
 
The tools for creating your graphics include both drawing and painting environments. Drawing is represented by the T-Square icon in the upper left corner of the window and Painting by the Paint Brush icon. Clicking this icon will switch between the environments.
The tools in the palette are very similar in function to those in other graphic programs. Feel free to experiment if you are unfamiliar with the tools.
To compliment this creation environment, you can also paste graphics, text, and scanned images from many other programs directly into the Design Window. As a rule of thumb, if an image can be pasted into the Scrapbook, it can be brought into Course Builder. If a graphic has been saved in PICT format, you can use a menu item import it directly.
>> Choose 'Import PICT…' (Command O) from the File Menu.
A standard Macintosh dialog appears which allows you to select the file you wish to import.
For this tutorial, we have already developed the graphics for display and saved them in PICT format in the Components folders. If you are using a computer with the monitor set to display 256-colors then use the graphics in the '256-color Components' folder.
>> Open the appropriate components folder for your setup.
 
>> Highlight the file titled Background and then select the button labeled 'Select'.
>> Select ‘OK’ when the alert informs you that the PICT is on the Clipboard then choose ‘Paste’ from the Edit Menu (Command V) to place the picture in your Graphic Design Output State.
 
If you need to reposition the picture in the Design Window, hold down the Command key and the spacebar at the same time to hide the Tool Palettes. You can then drag the picture to the position of your choice. Repeat the Command-spacebar sequence to show the toolbar.
  >> To personalize your program, use the Text tool to change
the line reading "Type your name here" to your own name.
Adding Sound
Now, let's include some digitized music to spice up your welcome.
  >> Either choose ‘Insert Sound…’ from the Design Menu or
click on the Music Notes icon in the bottom toolbar.
This dialog box allows you to select a sound to be played while this window is displayed.
>> Select ‘Add ‘Sounds’ File’
This updates the dialog with a selection of available digital sounds stored in the Sounds File associated with this course (in this case, CBS Sounds).
>> Highlight the sound ‘Intro’ to select it.
 
Course Builder supports both digitized sound as well as Synthesized Speech (MacinTalk). If you have MacinTalk Pro installed on your Macintosh, select the 'Speak Text Window' option and MacinTalk will 'read' whatever is typed in the Text Window.
>> You may select ‘Play Sound’ to hear the sound and then Select ‘OK’ to return to the Design Window.
Adding Animation
Now we'll add a mascot for your course. Your mascot will be "Martin MacMartian" who has spent the past 6 years attending the Alpha Centauri Star School majoring in the art of particle transport. You'll use Course Builder's animation features to help Martin appear in your presentation.
Course Builder supports frame-based animation - very similar to the way that motion picture film works. The appearance of movement or change is created by designing individual keyframes and using built-in transition effects to move between the frames. Let's try it!
Animation is developed in a separate part of the Graphic Design Output called the Animation Window.
>> Click on the 'Animate' button at the lower left of the bottom toolbar in the Design Window.
You are now in Course Builder's Animation development environment. The two crucial components for development of animation are the Animation Library and the Animation Window.
• The Animation Library (the window at the upper right of your screen) is where you will create sprites - graphic objects which can be set up to move or change on top of the picture in the Design Window. This library contains all the same graphics creation tools as the Design Window and, like the Design Window, you can import graphics from other programs.
• The Animation Window can be thought of as a transparent film overlay over the Design Window. Animation sequences are combination of sprites which are added to this overlay (Animation Window) in separate keyframes and moved across the unmoving background in the Design Window.
Note that the toolbar along the bottom of the display has been changed and now contains tool for creating your animation.
 
Clicking on the 'Design' button returns to the Design Window. The keyframe arrows allow you to move through the animation and add or take away keyframes. The numbers reflect the keyframe currently being displayed as well as the total number of keyframes in your animation.
The animation sequence you are going to create will use 3 keyframes of animation along with a dissolve transition to bring in the mascot. First, though we need to place Martin MacMartian in the Animation Library as a sprite.
About the Animation Library:
This special library contains the tools needed to create and store sprites with their associated poses.
>> Make certain that the Animation Library is visible. If not, choose 'Show Animation Library' (Command L) from the Animate Menu.
 
Sprites are referenced according to their number in the Animation Library (number in upper right corner). You can have up to 32 individual sprites which are accessed by using the scroll bar on the right side of the library.
Each sprite can have up to 16 poses designated by letters A through P along the bottom of the Animation Library. Poses are useful for creating sprites that appear to walk or have individual movement.
>> Choose 'Import PICT…' (Command O) from the File Menu.
>> Select the PICT file named 'MacMartian' and once the PICT is on the Clipboard, choose 'Paste' (Command V) from the Edit Menu.
You now have a picture of MacMartin in your Animation Library.
 
Adding keyframes
>> Click in the Animation Window (the Animation Library will disappear).
We will start this animation sequence by revealing the title screen with a left to right wipe and playing the intro sound. Note that the bottom toolbar reflects the sound selected from the Design Window and the transition selected in the state's Information Center.
We will have MacMartin appear to dissolve into the second frame.
>> Click on the rightmost arrow once to add a keyframe to this animation sequence.
 
The toolbar will change to show that you are now on keyframe 2 of 2 (total keyframes).
>> Choose 'Add Sprite' (Command A) from the Animate menu.
This adds MacMartin (the sprite in the current Animation Library reference number) to the Animation Window. Remember that this window overlays the unchanging design and you must return to the Design Window to make any alterations to the graphic background.
>> You may click on MacMartian to move him to another position on the display.
>> From the toolbar at the bottom of the Animation Window, click on the Transition icon to display the transition menu.
 
Note that this pop-up menu contains the same items available through the Output Information Center.
>> Scroll down to highlight and select the 'Dissolve' transition.
Setting Timing
This will be a 'Timed' transition so you need to let Course Builder know how long you want it to take to completely 'dissolve' MacMartian into the picture.
  >> Either choose ‘Set Synchronization…’ from the Design
menu or click on the Stopwatch icon at the bottom.
A dialog is displayed which allows you to enter a timed delay or select actions which must occur before the course continues.
>> In the 'Enter Delay in Seconds:' field type 3.
 
>> Select 'OK' to return to the Animation Window.
Now you have told Course Builder that you want this transition to take 3 seconds. The bottom toolbar reflects options you have selected.
 
Finally, we'll set your display to pause for just a moment before continuing.
>> Click on the rightmost arrow to add one more keyframe to your animation.
Note that your selections from the previous frame are carried over to this new frame.
>> Click on the Stopwatch icon to change the delay to 1.
This will pause for an additional second before continuing into your program. It is not necessary to change the transition to no effect. Transitions only affect sprites that are changing on the screen - since nothing changed, there will be no effect.
NOTE: Use the 'dissolve' effect sparingly! This effect works best when dissolving small to medium size graphics - not full screen displays. The longer transition time you give, the finer the dissolve.
Before returning to the Course Map, let's tryout your creation. You can make any fine tuning to your presentation at this point.
>> Choose ‘Play Animation’ (Command P) from the Animate Menu.
Perhaps MacMartian is finally ready to graduate - it seems he has mastered the concept of particle transfer - what do you think?
>> Choose ‘Return to Course Map’ (Command M) from the Design Menu
Running your application
You've done quite a bit of work and its time to see what you've done. But, before you do…
>> Choose 'Save' (Command S) from the File menu to save your work!
>> Choose ‘Run’ (Command R) from the Course Menu
When your program runs, notice how the Wipe Left to Right transition affects the display. Once your animation has completed, Course Builder lets you know that it has reached the Stop State by displaying a message reading “End of course reached.”
>> Select ‘OK’ to return to the Course Map.
Congratulations! You’re on your way toward developing your own interactive applications!
Inputs
Now that you've got a beginning framework for your program, you'll add a Text Input State to find out the user's name.
  >> Click on the Input Tools menu (third icon down) and drag
down to select a Text Input State.
>> Place this Input State on the Course Map directly to the right of Welcome.
  Input States, like other States, have an
Entrance, an Information Center and a
View. Unlike other states, though,
Inputs can have up to 10 separate Exit
points. This allows you to evaluate the
input and easily route the program
according.
Including a New State in Your Program
It is easy to add new States to an existing course. You simply place the State on the Course Map and reposition the Routes so the course flows through it.
>> Click once on the body of the route leading from the Exit of Welcome to select it.
>> Click and hold the mouse button on the end connecting the Route to Stop and drag it to connect to the Entrance of the Text Input State instead.
If you have any difficulty moving a Route, simply delete it and start again.
>> Reposition Stop to directly below the Input and drag a new Route from its Exit to the Entrance of Stop.
 
Placement of States on the Course Map is entirely up to you. Program Flow will follow the routing you set up with Routes and Bridges.
Asking your question
>> Double click on the Information Center of this Text Input State to display the first dialog box.
Like the Output Information Center, you have a number of options for setting up this State. Input options include changing the type of input (i.e., entering numbers instead of text), selecting different Window Boarders for your display, and changing the background window color.
Course Builder supports several different input types which can be broken down into two categories:
• Entering: Text and Numeric Inputs - these inputs require the user enter information through keyboard entry
• Clicking Radio Button, CheckBox, & Mouse Inputs - when using these inputs the user will make selections from the display using the mouse or if the computer is equipped with a touchscreen, by touching selections on the display
If you have MacinTalk II installed in your system (included with the purchase of Course Builder), one of the 'Runtime' options allows you to have the computer read the question.
>> Name this State "Who are you?"
>> Change the number of answer routes to 1
 
>> Select 'Next" to bring up the dialog where you will type in your question.
>> Type "Welcome space traveler! Please type your name in the space below."
 
Course Builder allows you to evaluate text answers by matching the input against what you enter in the Text Answer Matching field. You can search for exact matches, keywords or character combinations. For this example, you will not judge the user's name.
>> Select 'Next' to show the Input Scoring Dialog
This dialog is important for the scoring and tracking of your questions through the course. Again, since you are not judging the user's name you do not need to designate a correct answer or number of points if correct.
>> Select 'OK' to return to the Course Map.
Setting up the Input View
>> Double-click on the View of Who Are You? to see how the question will look when the program runs.
Your question appears on top of the display you placed in Welcome. Whenever an Input State is connected to an Output with a Route, the display in the Output will be a backdrop for the Input.
 
>> Click on the "Grow Box" in the lower right corner of the dialog to resize the dialog to a size and proportion of your liking (be careful not to cover up the OK button by sizing this dialog too small).
>> Click on the "Drag bars" in the upper left corner of the dialog to drag your question dialog to the lower right corner of your screen.
 
>> When you have the dialog the way you like, select 'OK' to return to the Course Map.
>> Save your work!
Feel free to take a moment to view your addition.
>> Choose 'Run' (Command R) from the Course Menu.
Notice the new sequence of events. Your program runs just as before except that now after your title screen is displayed, the Input dialog appears asking you to enter your name. After you select the OK button, you reach the end of the course.
Using Mouse Inputs
In this section you will design a question which requires the user click on an object with the mouse. This type input uses a Design Output State to display the question followed by a Mouse Input State which overlays click-sensitive areas on the display.
Setting up the Output
>> Select a Graphic Design Output State from the Output Tools menu (2nd icon down).
>> Place this new State on the Course Map directly below Welcome.
>> Reposition the Route leading from Who are You? to the Entrance of this new Output (leaving the Stop State unconnected for now).
>> Open the Information Center and name this State Select Destination.
>> Select 'OK' to return to the Course Map.
>> Double-click on the lower 2/3rds of this State to open its View.
>> Choose 'Import PICT…' (Command O) from the File Menu and select the file titled 'Destination'
>> Once the picture is on the clipboard, choose 'Paste' (Command V) from the Edit menu to place it in your Design Window.
As you see from this picture, instead of using an Input State to ask the question, it is contained in the graphic image. You will use an Input State to receive and evaluate the response.
Setting up the Input
>> From the Input State tools, choose a Mouse Input State and place it on your Course Map just below Select Destination.
>> Connect these States with a Route.
>> Open the Information Center of the Mouse Input and name this state Select Saturn?.
Notice that when you are using an Input which requires the user to click on objects, many of the options in the Information Center are dimmed. Since Mouse Inputs overlay a Design Window, the Window Type and Runtime features are not used.
>> Select 'Next' to show this Input State's Scoring Dialog.
Since this Input has to Answer Routes, there are two 'Correct Answer' options. Designating a correct answer and points to be awarded will allow Course Builder to track statistics for this Input. If you do not want these statistics included in the report, you can deselect the 'Report Results' option.
>> Select the #1 checkbox to designate that this will be the correct response.
>> Type 10 in the 'Number of Points' field.
 
>> Select 'OK' to return to the Course Map.
Defining Mouse Inputs (Click Areas)
>> Open the View of Select Saturn?.
 
You will use this dialog to designate "hot spots" on the screen which will respond to the user's mouse click. Note the two numbered boxes at the top of this dialog. Each box is associated with the corresponding Exit number from the Mouse Input.
The scrolling window to the right of this dialog shows a portion of the Output State to which it is connected, Select Destination.
Since we designated Exit 1 as the correct answer, rectangle #1 will cover Saturn to detect when the user click on the image.
>> Click on box number 1 and drag it over the planet Saturn on the Output (you may need to scroll the window). Position and size it to fit cover the whole planet. Resize the box by using the handles at the four corners.
>> Since any other selection is not correct, drag rectangle #2 up to the upper left corner and resize it to completely cover the rest of the screen. The display area will scroll as you drag.
>> Deselect the options to 'Invert Boxes' and 'Beep if Missed'.
>> Select 'OK' to return to the Course Map.
>> Save your work!
You have now created two mouse areas which will detect when the user clicks on either the picture of Saturn or somewhere else on the screen.
Routing based on Mouse Click
Now you will use Graphic Design Outputs to give feedback based on the selection.
>> Select a Graphic Design Output State from the Output tools and place this State below and to the right of Select Saturn?.
>> Drag a Route from Exit 2 to the Entrance of this State.
Since Exit 2 corresponds to the mouse area covering the entire screen, this feedback will tell the user that the selection was not correct and give an opportunity to try again.
>> Open the Information Center and name this State Incorrect Destination.
>> Select 'OK' to return to the Course Map.
>> Drag a Route from the Exit of the Output State just placed back up to the Entrance of Select Destination.
 
>> Open the View of Incorrect Destination.
If you are working on a Macintosh set to display 256-colors, you may wish to change the background color of the Design Window.
>> Choose 'Edit Patterns…' from the Edit menu.
If you are in 256 color mode, the dialog presented will allow you to select colors from the course CLUT (Color Look-Up Table) for Design, Text, and Input windows. If you are in other than 256-colors, you will only be able to edit the patterns available in the course.
 
>> Click on the background color you would like for your Design Window and then select 'Design' - the field next to the 'Design' button will be updated to reflect the color selected. (NOTE: all new Design Outputs you create will have the same color background until you change the default color).
>> When you are satisfied with your selection, select 'OK' to return to the Design Window.
>> Import the graphic titled 'Sat.Feedback' for this Output.
>> Click on the Stopwatch icon and select the 'Continue Button' option so that the user will have a chance to read your message and continue when ready.
 
>> Select 'OK' to return to the Design Window.
Note that your display has been updated with a Continue button in the lower right corner.
Calling the User by Name
Remember that you previously asked the user's name through a Text Input State. Course Builder has saved the answer typed in as an Input Variable. Variables are place holders for information which are updated throughout the program.
For example, one of Course Builder's standard variables is the time spent in the program. Of course, the time spent is continuously changing and therefore, is variable based on when you ask to see this information.
Course Builder has quite a few built-in variables which are divided into categories according to their use. You can also create your own custom variables which can hold whatever information you want.
For this application, you use a process called variable substitution to call the person by name when giving feedback.
>> Position the cursor directly after the word "No," (after the comma) and type a space.
Variable Substitution
>> While holding down the option key, click once with the mouse.
You are now looking at Course Builder's Variable Selection Dialog. You will use this dialog to select a variable whose value (or the information it contains) will be displayed on the screen when your program runs.
 
Since you want to access information typed in the Text Input State, this will be an 'Input' variable.
>> Click on the 'Input' radio button option.
Two lists will appear side-by-side. The list on the left contains all the named Input States currently in your program. On the right is a list of Input variables you can select for substitution.
>> From the Input States list, click once on the state Who Are You? to select it.
>> From the Input Variables list, click once on the 'input last answer (T)' to select this variable.
 
>> Select 'OK' to return to the Design Window.
Notice that the text on this screen now reads, "No, InputAnswer{Who are You?}, that is not Saturn. Saturn is the 6th planet from the sun."
 
When your program runs, Course Builder will look at the information contained in the Input Variable you selected and will substitute that information (whatever the user typed in when you asked their name) for the words InputAnswer{Who Are You?} - this is called variable substitution.
>> Choose 'Return to Course Map' (Command M) from the Design menu.
Way to Go! Feedback
Now, let's give the user some feedback if a correct selection was made. We will just replicate the 'Incorrect' feedback state on the Course Map and change the information it contains to give 'Correct' feedback.
>> Click once on Incorrect Destination to highlight this State.
>> Choose 'Copy' (Command C) from the Edit menu and click on an empty place on the Course Map to the left of Incorrect Destination.
>> Choose 'Paste' (Command V) from the Edit menu to place a duplicate of this State on your Course Map.
NOTE: If you are presented a dialog which reads 'You may not paste over existing states or outside the work area', then make sure your flashing corner cursor is in an empty area on the Course Map.
>> Open the Information Center of the State you just placed and rename it to Correct Destination.
>> Select 'OK' to return to the Course Map.
>> Drag a Route from the Exit of Select Saturn? to the Entrance of your new Output.
>> Click on the Stop State that you had previously disconnected from the program and drag it to a position below this Output - connect these states with a Route.
>> Open the View of Correct Destination and change the wording to give positive feedback. Be careful not to delete or change any part of the text which provides the variable substitution.
Your wording may read as follows:
 
Another Type of Animation
Now, finally, let's add a bit of excitement with a rocket lift-off when the user selects the correct answer.
>> Click on the 'Animate' button in the lower left corner of the Design Window to show the Animation Library (you can also choose 'Show Animation Library' (Command L) from the Design menu).
Note that the Animation Library for this state is empty. Each Graphic Design Output State has its own Animation Window and Library with its own associated Sprites.
>> Import the PICT titled 'Rocket' into the Animation Library's first sprite location (Sprite Reference #1).
>> Click in the Animation Window and choose 'Add Sprite' (Command A) from the Animate menu.
The rocket is now added to your Animation Window.
>> Click on your rocket sprite and drag it to the lower right corner of the display. For best effect, drag the sprite down until it is almost off the display.
>> Click on the Stopwatch icon in the bottom toolbar to deselect the Continue button.
>> Click on the Music Notes icon in the bottom toolbar to select the 'Rocket Lift-off' digital sound to play for this animation.
>> Add one additional keyframe to your animation.
 
Notice that your sprite was copied onto the next keyframe. You can remove sprites from individual keyframes by selecting the sprite and then choosing 'Remove Sprite' (Command R) from the Animate menu.
>> Click on the rocket and drag it straight up to the top of your display. Again, the effect will be better if you drag it up until it is almost off the display.
You will be using an effect called a 'tween' to simulate motion between of the sprite between frame 1 and frame 2. The tween effect moves and/or resizes an individual sprite between different positions/sizes on adjacent keyframes.
>> Click on the Transition pop-up menu, and choose the 'tween' transition from the very bottom of this menu.
>> Click on the Stopwatch icon to designate a 5 second transition for the tween.
Course Builder will now calculate the number of intermediate frames it can produce in the time designated and decide where the sprite needs to be in each intermediate frame.Command The smoothness of a tween is based on both the size of the sprite you are moving and the amount of time designated for the transition.
>> Select the 'Continue after Sound Completes' synchronization.
Now your application will automatically continue without additional user input as soon as the rocket lift-off sound is complete.
>> Select 'OK' to return to the Animation Window.
>> Choose 'Play' (Command P) from the Animate menu to see how your rocket lift-off will look.
If you like, you can tweak the timing or positioning of the rocket before returning to the Course Map.
>> When you are ready, choose 'Return to Course Map' (Command M) from the Animate menu.
>> Save your work!!!
You must be anxious to see the work you just completed so, without any additional delay - Choose 'Run' (Command R) from the Course menu.
Way to go!!! - you've just completed the first segment of your program!
